<template>
	<div class="banner card card-banner">
		<div class="card-content-inner">
			<ul class="icon">
				<li class="banner-btn" v-for="(item,i) in banner" v-on:click="searchFn(item.title)">
					<router-link  to="/foods2">
						<img v-bind:src="item.imgsrc">
						<p class="banner-p">{{item.title}}</p>
						<!-- <a href=""></a> -->
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>
<script type="text/javascript">
	export default {
		// props:["title"]
		data(){
			return{
				banner:[
					{imgsrc:"http://img13.yiguoimg.com/e/ad/2016/161020/586030925119660372_120x96.png",title:"做美食"},
					{imgsrc:"http://img14.yiguoimg.com/e/ad/2016/161020/586030925119562068_120x96.png",title:"体验师"},
					{imgsrc:"http://img13.yiguoimg.com/e/ad/2016/161020/586030925119693140_120x96.png",title:"涨知识"},
					{imgsrc:"http://img12.yiguoimg.com/e/ad/2016/161020/586030925119725908_120x96.png",title:"生活家"},
					{imgsrc:"http://img09.yiguoimg.com/e/ad/2017/170117/586030927703745073_120x96.png",title:"爱美食"}
				]
			}
		},

		methods:{
			searchFn:function(txt){
				localStorage.setItem("bannerTxt",txt);
			}
		},
		mounted(){
			
		}
	}
</script>
<style type="text/css">
	.banner .card{
		margin: 0.5rem 0;
		padding: 0.5rem;
	}
	.banner .card-banner{
		margin-top: 0;
		padding: 0;
	}
	.banner .icon{
		width: 100%;
	}
	.banner .icon li{
		width: 20%;
		text-align: center;
		float: left;
	}
	.banner .icon li img{
		width: 65%;
	}
	.banner .icon li p{
		padding-top: 0.3rem;
	}
	.banner p{
		color: #666;
	}
</style>